<template>
  <div class>
    <!-- --------------------------------------------------------编辑弹出框 -->
    <el-dialog width="900px" title="编辑-用户管理" :visible.sync="dialogEditVisible">
      <el-form size="mini" inline :model="editForm" :rules="rules" ref="form" label-width="80px">
        <my-form-item label="真实姓名">
          <el-input v-model="editForm.realName" autocomplete="off"></el-input>
        </my-form-item>

         <my-form-item label="部门名称" prop="organId">
          <el-cascader
            change-on-select
            :options="options"
            :props="cascaderProps"
            v-model="editForm.organId"
            style="width: 178px;"
          ></el-cascader>
        </my-form-item>

        <my-form-item label="职员编码">
          <el-input v-model="editForm.userCode" disabled autocomplete="off"></el-input>
        </my-form-item>

        <my-form-item label="性别">
          <el-select v-model="editForm.sex" autocomplete="off" style="width: 178px;">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="2"></el-option>
          </el-select>
        </my-form-item>

        <my-form-item label="证件类型">
          <el-input v-model="editForm.identificationType" autocomplete="off"></el-input>
        </my-form-item>

        <my-form-item label="证件号码">
          <el-input v-model="editForm.identificationNumber" autocomplete="off"></el-input>
        </my-form-item>

        <my-form-item label="出生日期">
          <el-date-picker
            style="width: 178px;"
            v-model="editForm.birthday"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          ></el-date-picker>
        </my-form-item>

        <my-form-item label="家庭住址">
          <el-input v-model="editForm.adress" autocomplete="off"></el-input>
        </my-form-item>

        <my-form-item label="邮政编码">
          <el-input v-model="editForm.postcode" autocomplete="off"></el-input>
        </my-form-item>

        <my-form-item label="职务">
          <el-input v-model="editForm.userPost" autocomplete="off" style="width: 178px;"></el-input>
        </my-form-item>

        <my-form-item label="职称">
          <el-input v-model="editForm.title" autocomplete="off"></el-input>
        </my-form-item>

        <my-form-item label="职员类别">
          <el-input v-model="editForm.categoryStaff" autocomplete="off"></el-input>
        </my-form-item>

        <my-form-item label="学校">
          <el-input v-model="editForm.school" autocomplete="off" style="width: 178px;"></el-input>
        </my-form-item>

        <my-form-item label="最高学历">
          <el-input v-model="editForm.highEducation" autocomplete="off"></el-input>
        </my-form-item>

        <my-form-item label="职员属性">
          <el-input v-model="editForm.staffAttribute" autocomplete="off"></el-input>
        </my-form-item>

        <my-form-item label="固定电话">
          <el-input v-model="editForm.telephone" autocomplete="off" style="width: 178px;"></el-input>
        </my-form-item>

        <my-form-item label="移动电话">
          <el-input v-model="editForm.mobile" autocomplete="off"></el-input>
        </my-form-item>

        <my-form-item label="电子邮箱">
          <el-input v-model="editForm.email" autocomplete="off"></el-input>
        </my-form-item>

        <my-form-item label="QQ号码">
          <el-input v-model="editForm.qqNumber" autocomplete="off" style="width: 178px;"></el-input>
        </my-form-item>

        <my-form-item label="微信号">
          <el-input v-model="editForm.wechatNumber" autocomplete="off"></el-input>
        </my-form-item>

        <my-form-item label="建档人">
          <el-input v-model="editForm.createUserName" autocomplete="off" disabled></el-input>
        </my-form-item>

        <my-form-item label="是否领导">
          <el-select v-model="editForm.leader" style="width: 178px;">
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </my-form-item>

        <my-form-item label="启用状态">
          <el-select v-model="editForm.userStatus" @change="changeStatus" style="width: 178px;">
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
        </my-form-item>

        <my-form-item label="同时登陆 ">
          <el-select v-model="editForm.enableParallelLogin" style="width: 178px;">
            <el-option label="允许" value="1"></el-option>
            <el-option label="不允许" value="0"></el-option>
          </el-select>
        </my-form-item>

        <my-form-item label="登陆账号" prop="username" v-if="editForm.userStatus==1">
          <el-input v-model="editForm.username" autocomplete="off" disabled></el-input>
        </my-form-item>

        <my-form-item label="登陆密码" v-if="editForm.userStatus==1">
          <el-input v-model="editForm.password" autocomplete="off"></el-input>
        </my-form-item>
        <my-form-item label="备注">
          <el-input
            v-model="editForm.remark"
            type="textarea"
            autocomplete="off"
            style="width: 178px;"
          ></el-input>
        </my-form-item>

        <!-- 
            <my-form-item label="确认密码" prop="confirmPassword" v-if="editForm.userStatus==1">
              <el-input v-model="editForm.confirmPassword" autocomplete="off"></el-input>
            </my-form-item>
        -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancle1" size="mini">取 消</el-button>
        <el-button type="primary"  size="mini" @click="handleEdit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { editItem } from "../function";
import { getList as glbOptions } from "../../organ/organ";
export default {
  components: {},
  props: {
    editForm: {
      id: "",
      username: "",
      password: "",
      realName: "",
      mobile: "",
      telephone: "",
      email: "",
      userStatus: "",
      // createTime:'',
      tokenCreateTime: "",
      token: "",
      userType: "",
      organCode: "",
      organName: "",
      deptId: "",
      deptName: "",
      organId: "",
      enabledState: "",
      userCode: "",
      simpleName: "",
      sex: "",
      identificationType: "",
      identificationNumber: "",
      birthday: "",
      adress: "",
      postcode: "",
      userPost: "",
      title: "",
      categoryStaff: "",
      school: "",
      highEducation: "",
      staffAttribute: "",
      qqNumber: "",
      remark: "",
      loginAccount: "",
      confirmPassword: "",
      outageDate: "",
      roleAttribute: "",
      roleId: "",
      wechatNumber: "",
      leader: "",
      createUserName: ""
    }
  },
  data() {
    let that = this;
    let validatePass = (rule, value, callback) => {
      if (that.editForm.password && value === "") {
        return callback(new Error("请再次输入密码"));
      } else if (that.editForm.password && value !== that.editForm.password) {
        return callback(new Error("两次输入密码不一致!"));
      } else {
        return callback();
      }
    };
    return {
      dialogEditVisible: false,

       options: [],
      cascaderProps: {
        value: "id",
        label: "organName",
        children: "children"
      },

      rules: {
         organId: [
          { required: true, message: "部门名称不能为空！", trigger: "blur" }
        ],
        username: [
          { required: true, message: "用户名不能为空！", trigger: "blur" }
        ],
        password: [
          { required: true, message: "密码不能为空！", trigger: "blur" }
        ],
        confirmPassword: [
          { required: false, validator: validatePass, trigger: "blur" }
        ]
      }
    };
  },
    mounted () {
    this.getGlbOptions()
  },
  // mounted() {},
  methods: {
     getGlbOptions() {
      glbOptions().then(res => {
        console.log("ok");
        console.log(res.retBody);
        if (res.retHead.code == "0000000") {
          this.options = res.retBody;
        }
      });
    },

    changeStatus() {
      //   if (this.addForm.userStatus == 0) {
      //     // console.log("去除校验");
      //     this.rules = {
      //       username: [
      //         { required: false, message: "用户名不能为空！", trigger: "blur" }
      //       ],
      //       password: [
      //         { required: false, message: "密码不能为空！", trigger: "blur" }
      //       ]
      //     };
      //   }
      //   if (this.addForm.userStatus == 1) {
      //     // console.log("增加校验");
      //     this.rules = {
      //       username: [
      //         { required: true, message: "用户名不能为空！", trigger: "blur" }
      //       ],
      //       password: [
      //         { required: true, message: "密码不能为空！", trigger: "blur" }
      //       ]
      //     };
      //   }
    },
    cancle1() {
      this.dialogEditVisible = false;
      this.resetForm("form");
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleEdit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.editForm.organId = this.editForm.organId[
            this.editForm.organId.length - 1
          ];
          let params = this.editForm;
          editItem(params).then(res => {
            if (res.retHead.code == "0000000") {
              this.$message.success("执行成功！");
              this.$emit("editOver");
            } else {
              this.$message.error("执行失败！");
            }
          });
          this.dialogEditVisible = false;
        }
      });
    }
  },
  created() {}
};
</script>
<style lang='scss' scoped>
</style>